69精品人人人人,国产精品美女一区二区三区,人妻少妇精品久久,一本久久A久久免费精品不卡

聯(lián)系我們
咨詢熱線：

185-9527-1032

聯(lián)系QQ：

2863379292

官方微信：

如何制作交互組件庫 提升工作效率

建站經(jīng)驗

導(dǎo)讀：曾幾何時，每次交互稿都是徒手畫，或者截個圖在現(xiàn)有的界面上改造。漸漸感到同一平臺，每個版本都有很多重復(fù)勞動，是時候做個交互組件庫了~什么是組件庫？就是類似axure左側(cè)欄的這一坨

發(fā)表日期：2020-02-13

文章編輯：興田科技

瀏覽次數(shù)：6141

標簽：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

曾幾何時，每次交互稿都是徒手畫，或者截個圖在現(xiàn)有的界面上改造。漸漸感到同一平臺，每個版本都有很多重復(fù)勞動，是時候做個交互組件庫了~

什么是組件庫？

就是類似axure左側(cè)欄的這一坨標準控件，方便直接拖拽使用。

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

但如何制作滿足自己產(chǎn)品需要的交互組件庫，一開始是模糊的。最初只是根據(jù)自己的需要隨便列一些出來，在做的過程中逐漸清晰。

交互組件庫的作用：

提高個人工作效率方便多人合作使交互文檔具有統(tǒng)一美

哪些東西可以做成交互組件？

只需記住一點：當(dāng)你感覺到某種UI組合，每次都需要重新畫一遍的時候，就可以考慮把這種UI組合做成交互組件。

上面所說的“重復(fù)勞動”對不同人來說可能定義不盡相同。比如對我來說，即使把Tab的選中狀態(tài)變一下，也是一種重復(fù)勞動。那我就會把不同Tab的選中狀態(tài)都做一份。這樣等到要制作“我的音樂”相關(guān)交互的時候，直接把下面第二個組件拖過去就可以了。

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

但對于某些Tab組合來說，每個Tab底下的內(nèi)容可能是差不多的，做交互的時候往往只需要表達第一個Tab下的頁面就可以了。這種我就只把第一個Tab的選中狀態(tài)做一下。總得來說，怎樣對自己方便就怎樣做。

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

交互組件應(yīng)該具備的特點：

組件組件，最大的一個特點就是可組合性。整理的時候，思考哪些UI組合是不同頁面都會共用的，把這些元素剝離出來，就成了交互組件。根據(jù)自己的經(jīng)驗，我會把組件歸為幾大類：

頂欄類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

導(dǎo)航類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

彈窗類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

彈出浮層類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

toast類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

列表類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

鍵盤類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

icon類：

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

另外，一些常用的主界面和內(nèi)容頁我也會做成組件。這樣當(dāng)我要拿搜索頁說事兒的時候，就可以直接把整個搜索頁拖過去，而不需要花時間再搭一遍積木了。

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

單個交互組件應(yīng)該具備的特點：可編輯性。pNG圖標、文字、選中……每一個元素都是可以單獨編輯的。

如何制作交互組件庫 提升工作效率 怎么做網(wǎng)站賺錢

組件的顏色？

盡量以黑(性)白(冷)灰(淡)風(fēng)格為主。

如何把各種組件想全？

不用想全，邊做邊補。所以不同平臺的交互組件庫應(yīng)該有專人維護更新，才能保證組件庫始終好用。這點其實知易行難，一定要提醒自己“磨刀不誤砍柴工”。

組件邊上需要寫說明文字嗎？

個人喜好組件邊上不寫任何說明文字，組件的名字已經(jīng)反映在axure文檔的側(cè)導(dǎo)航上。只要側(cè)導(dǎo)航分類符合心智模型（好找），頁面上清清爽爽的組件（方便拖拽），就能滿足我的需求了。

組件庫是給畫交互稿的人用的，不是給別人看的。給別人看的是另外一種東西，交互規(guī)則庫，那種需要說明文字。

因此，判斷一個交互組件庫是否好用的標準是：

你自己是不是經(jīng)常使用自己的組件庫別人樂不樂意使用你的組件庫

相關(guān)推薦

更多新聞